﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>数据明细管理</title>
<#--freemarker引入模板文件，相对路径-->
    <#include "../common/link.ftl">

    <script>
        $(function () {

            //新增/编辑按钮事件，打开模态框
            $('.btn-input').click(function () {
                //字典明细中第一次进入，没有选择字典目录，不应该显示数据、
                if (${qo.parentId} == -1) {
                    $.messager.alert("温馨提示：选择目录才能做这个操作哦！")
                } else {
                    //因为编辑和保存公用一个模态框，所以再添加前清一下模态框中的内容
                    $('#editForm input').val('');//这个更安全
                    //在打开模态框之前：获取事件源绑定的数据，在编辑的时候回显数据，使用data-xxx
                    var json = $(this).data("json");

                    //把目录的名称设置到模态框的input中
                    $("#parentName").val($("a[data-id=${qo.parentId}]").text());
                    $("#parentId").val(${qo.parentId});

                    if (json) {// json有数据表示是编辑操作
                        $('input[name=id]').val(json.id);
                        $('input[name=title]').val(json.title);
                        $('input[name=sequence]').val(json.sequence);
                    }
                    //打开模态框
                    $('#myModal').modal('show');
                }
            });

            //j-query-from插件：在有from表单提交异步请求时可以使用
            $('.btn-save').click(function () {
                //用j-query-from来提交异步表单
                $('#editForm').ajaxSubmit(handlerMessage);

            });

        });
    </script>

</head>
<body class="hold-transition skin-blue sidebar-mini">

<div class="wrapper">
    <#include "../common/navbar.ftl">
    <!--菜单回显-->
    <#assign currentMenu="systemDictionaryItem"/>

    <#include "../common/menu.ftl">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>数据明细管理</h1>
        </section>

        <section class="content">

            <div class="box">
                <div class="row">
                    <div class="col-lg-4">
                        <div class="panel panel-default">
                            <div class="panel-heading">数据目录：</div>
                            <div class="panel-body">
                                <div class="list-group">
                                    <#list systemDictionarys as dic>
                                        <a data-id="${dic.id}" href="/systemDictionaryItem/list.do?parentId=${dic.id}"
                                           class="list-group-item">
                                            ${dic.title!}
                                        </a>
                                    </#list>
                                    <script>
                                        $("a[data-id=${qo.parentId!}]").addClass('active');
                                    </script>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="col-lg-8">


                        <!--高级查询--->
                        <form class="form-inline" id="searchForm" action="/systemDictionaryItem/list.do" method="post">
                            <input type="hidden" name="currentPage" id="currentPage" value="1">
                        <#--解决点击下一页数据丢失问题-->
                            <input type="hidden" name="parentId" value="${qo.parentId!}"/>
                            <a href="#" class="btn btn-success btn-input" style="margin: 10px">
                                <span class="glyphicon glyphicon-plus btn-input"></span> 添加
                            </a>
                        </form>
                        <!--明细内容-->
                        <div class="box-body table-responsive no-padding ">
                            <table class="table table-hover table-bordered">
                                <tr>
                                    <th>编号</th>
                                    <th>标题</th>
                                    <th>序号</th>
                                    <th>操作</th>
                                </tr>
                                <#list (result.list)! as systemDictionaryItem>
                                    <tr>
                                        <td>${systemDictionaryItem_index + 1}</td>
                                        <td>${systemDictionaryItem.title!}</td>
                                        <td>${systemDictionaryItem.sequence!}</td>
                                        <td>
                                            <a href="#" class="btn btn-info btn-xs btn-input"
                                               data-json='${(systemDictionaryItem.json)!}'><span
                                                    class="glyphicon glyphicon-pencil btn-input"></span>
                                                编辑
                                            </a>
                                        </td>
                                    </tr>
                                </#list>
                            </table>

                            <!--分页插件的引用-->
                    <#include "../common/page.ftl"/>

                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <#include "../common/footer.ftl"/>
</div>
</body>

<#--编辑模态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加字典明细</h4>
            </div>
            <div class="modal-body">
            <#--input 表单-->
                <form class="form-horizontal btn-submit" action="/systemDictionaryItem/saveOrUpdate.do" method="post"
                      id="editForm">
                    <input type="hidden" name="id">
                    <div class="form-group" style="margin-top: 10px;">
                        <label for="parentName" class="col-sm-3 control-label">字典目录：</label>
                        <div class="col-sm-6">
                        <#--用户可见的目录名-->
                            <input type="text" class="form-control" id="parentName" name="parentName" readonly/>
                        <#--用来提交到后台关联的-->
                            <input type="hidden" class="form-control" name="parentId" id="parentId"/>
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 10px;">
                        <label for="title" class="col-sm-3 control-label">明细标题：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="title" name="title"
                            >
                        </div>
                    </div>
                    <div class="form-group" style="margin-top: 10px;">
                        <label for="sequence" class="col-sm-3 control-label">明细序号：</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" id="sequence" name="sequence"
                            >
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary btn-save">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</html>
